<template>
    <div class="container">
        <m-header>购票记录</m-header>
        <div class="main">
            <div class="filter-wrap">
                <div @click="onShow">
                    <span>订单状态：{{filterStatus}}</span>
                    <van-icon name="arrow-down" />
                </div>
            </div>
            <div class="content">
                <div class="list-wrap">
                    <m-list :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :load-end="loadEnd">
                        <div class="item-wrap" v-for="(item,index) in list" :key="index" @click="toDetail(item.out_trade_no)">
                            <div class="item-box">
                                <div class="item-top">
                                    <span class="title">订单号：{{item.out_trade_no}}</span>
                                    <span class="status" :class="statusClass(statusName(item))">{{statusName(item)}}</span>
                                </div>
                                <ul class="item-mid">
                                    <li>班车类型：{{item.shuttle_type}}</li>
                                    <li>套票类型：{{item.packag_type_name}}</li>
                                    <li>学校：{{item.school_name}}</li>
                                    <li>票种：{{item.ticket_typall_name}}</li>
                                    <li>乘车人：{{item.passengers_name}}</li>
                                    <li>订单创建时间：{{item.input_time}}</li>
                                </ul>
                                <div class="item-bot">
                                    有效时间：{{item.effective_time_start}} - {{item.effective_time_end}}
                                </div>
                                <div class="item-arrow">
                                    <van-icon class="arrow" name="arrow" color="#202020" size="20"></van-icon>
                                </div>
                            </div>
                        </div>
                    </m-list>
                </div>
            </div>
        </div>
        <m-select v-model="show" :options="options" @select="onSelect"></m-select>
    </div>
</template>

<script>
  import list from '@/components/list/list';
  import select from '@/components/select/select';
  import {getOrder} from "../../request/api";
  import {crtTimeFtt} from "../../utils/utils";

  export default {
    name: "ticketRecord",
    components: {
      "m-list": list,
      "m-select": select
    },
    filters: {
     /* statusClass(data) {
      },*/
      statusName(data){
        let {Order_status,effective_time_end} = data;
      }
    },
    computed:{
      statusClass(){
        return function(Order_status){
          // let {Order_status} = data;
          return Order_status === '待支付' ? 'blue'
            : Order_status === '待使用' ? 'green'
              : Order_status === '使用中' ? 'green'
                :Order_status === '申请退票中' ? 'orange'
                  : Order_status === '已退票' ? 'red'
                    : Order_status === '已过期' ? 'yellow'
                    : Order_status === '购票失败' ? 'red'
                      : 'grey'
        }
      },
      statusName(){
        return function(data){
          let {Order_status,effective_time_start,effective_time_end} = data,
            name = Order_status,
            now = new Date().getTime(),
            start = effective_time_start && new Date(crtTimeFtt(effective_time_start,'YYYY/MM/DD HH:mm:ss')).getTime(),
            end = effective_time_end && new Date(crtTimeFtt(effective_time_end,'YYYY/MM/DD HH:mm:ss')).getTime();
          if (Order_status === '已支付' && now < start) name = '待使用';
          if (Order_status === '已支付' && now < end) name = '已过期';
          if (Order_status === '已支付' && start < now < end) name = '使用中'

          return name;
        }
      }
    },
    data() {
      return {
        list: [],
        total: 0,
        size: 10,
        no:1,
        loading: false,
        loadEnd: true,

        filterStatus: '全部',
        show: false,
        options:['全部','待支付','已支付','购票失败','申请退票中','已退票'],
      }
    },
    methods: {
      getDataList(first){
        let {no,size,loadEnd,filterStatus} = this,  //当前请求页数
          list = [];
        no = first ? 1 : no;
        let param = {
          no,size,
          Order_status: filterStatus === '全部' ? '' : filterStatus,
          shuttle_type: '定制'
        }
        getOrder(param).then(res => {
          let {errcode ,row,total} = res;
          if (errcode !== 0)return;

          if (!first){list = this.list}
          list = [...list,...row];
          this.list = list;
          this.loadEnd = !loadEnd;
          this.no = ++no;
          this.total = total
        })
      },

      onShow(){
        this.show = true;
      },
      onSelect(e){
        this.filterStatus = e;
        this.loading = true;
        this.list = [];
        this.total = 0;
        this.no = 1;
        this.getDataList()
      },
      toDetail(id){
        this.$router.push({ path: '/cticketDetail', query: { id } })
      }
    }
  }
</script>

<style scoped lang="less">
    .main{
        display: flex;
        flex-direction: column;
        .filter-wrap{
            padding: 0 10px;
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #2E2E2E;
            span{
                margin-right: 5px;
            }
        }
        .content{
            flex: 1;
            height: 0;
            .list-wrap{
                height: 100%;
                box-sizing: border-box;
                .item-wrap{
                    padding: 0 10px;
                    margin-bottom: 10px;
                    & + .item-wrap{
                        margin-top: 10px;
                    }
                    .item-box{
                        background: #fff;
                        border-radius: 5px;
                        position: relative;
                        .item-top{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 12px 15px;
                            .title{
                                color: #2e2e2e;
                                font-weight: bold;
                                font-size: 15px;
                            }
                            .status{
                                font-size: 14px;
                                &.blue{
                                    color: #1989fa;
                                }
                                &.green{
                                    color: #24C373;
                                }
                                &.red{
                                    color: #FF1313;
                                }
                                &.yellow{
                                    color: #ffd11b;
                                }
                                &.orange{
                                    color: #FF7913;
                                }
                                &.grey{
                                    color: #B3B3B3;
                                }

                                &.syz,&.dsy,&.dzf{
                                    color: #24C373;
                                }
                                &.ytp,&.gpsbtk{
                                    color: #FF1313;
                                }
                                &.ysy{
                                    color: #B3B3B3;
                                }
                                &.sqtpz{
                                }
                            }
                        }
                        .item-mid{
                            color: #2e2e2e;
                            font-size: 15px;
                            padding: 0 15px 10px;
                            line-height: 24px;
                        }
                        .item-bot{
                            border-top: 1px solid #dedede;
                            padding: 0 15px;
                            height: 37px;
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                        }
                        .item-arrow{
                            position: absolute;
                            top: calc((100% - 27px)/2);
                            transform: translateY(-50%);
                            right: 13px;
                        }
                    }
                }
            }
        }
    }
</style>
